<!-- 语境对话页面 -->
<div class="conversation-container">
    <!-- 页面标题 -->
    <div class="conversation-header">
        <h2>💬 语境对话</h2>
        <!-- 在主框架中不需要关闭按钮 -->
    </div>
    
    <!-- 输入区域 -->
    <div class="conversation-input-area">
        <div class="input-section">
            <textarea id="context-input" 
                      placeholder="此处粘贴对方的话"
                      class="context-textarea"></textarea>
            <button class="paste-btn" onclick="pasteContent()" title="粘贴">粘贴</button>
        </div>
        
        <!-- 回复类型选择按钮 -->
        <div class="reply-type-buttons">
            <button class="reply-btn" data-type="negotiate" onclick="selectReplyType(this, '议价')">议价</button>
            <button class="reply-btn" data-type="trust" onclick="selectReplyType(this, '信任')">信任</button>
            <button class="reply-btn" data-type="demand" onclick="selectReplyType(this, '需求')">需求</button>
            <button class="reply-btn delete-btn" onclick="clearContent()">删除</button>
            
            <button class="reply-btn" data-type="objection" onclick="selectReplyType(this, '异议')">异议</button>
            <button class="reply-btn" data-type="value" onclick="selectReplyType(this, '价值')">价值</button>
            <button class="reply-btn" data-type="contract" onclick="selectReplyType(this, '签单')">签单</button>
            
            <button class="reply-btn" data-type="reject" onclick="selectReplyType(this, '拒绝')">拒绝</button>
            <button class="reply-btn" data-type="follow_up" onclick="selectReplyType(this, '追单')">追单</button>
            <button class="reply-btn" data-type="close" onclick="selectReplyType(this, '销冠')">销冠</button>
        </div>
        
        <!-- 发送按钮 -->
        <div class="send-section">
            <button class="send-btn" onclick="generateReply()" id="send-btn">
                发送
            </button>
        </div>
    </div>
    
    <!-- 回复结果区域 -->
    <div class="reply-result" id="reply-result" style="display: none;">
        <div class="result-header">
            <h3>✨ 生成的回复</h3>
            <div class="result-actions">
                <button class="action-btn regenerate-btn" onclick="regenerateReply()">重新生成</button>
                <button class="action-btn copy-btn" onclick="copyReply()" id="copy-btn">
                    <span class="copy-icon">📋</span>
                    <span class="copy-text">复制</span>
                </button>
            </div>
        </div>
        
        <div class="reply-content" id="reply-content">
            <!-- 生成的回复内容将显示在这里 -->
        </div>
        
        <div class="result-info">
            <span class="word-count">字数：<span id="result-word-count">0</span></span>
            <span class="generation-time">用时：<span id="result-time">0s</span></span>
        </div>
    </div>
</div>

<style>
/* 语境对话页面样式 */
.conversation-container {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 当在主框架中显示时的适配样式 */
.main-content .conversation-container {
    margin: 20px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: none;
    height: 100%;
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
}

.main-content .conversation-input-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-content .reply-result {
    flex: 1;
    overflow-y: auto;
}

/* 标题区域 */
.conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.conversation-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* 输入区域 */
.conversation-input-area {
    padding: 25px;
}

.input-section {
    position: relative;
    margin-bottom: 20px;
}

.context-textarea {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    background: #f8fafc;
    transition: all 0.3s ease;
    outline: none;
}

.context-textarea:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.context-textarea::placeholder {
    color: #94a3b8;
}

.paste-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.paste-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* 回复类型按钮 */
.reply-type-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.reply-btn {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.reply-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.reply-btn.selected {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.reply-btn.delete-btn {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.reply-btn.delete-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* 发送区域 */
.send-section {
    display: flex;
    justify-content: flex-end;
}

.send-btn {
    padding: 12px 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 回复结果区域 */
.reply-result {
    margin-top: 20px;
    padding: 25px;
    background: rgba(248, 250, 252, 0.5);
    border-top: 1px solid #e2e8f0;
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.result-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.result-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.copy-btn.copied {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.reply-content {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #1e293b;
    position: relative;
}

.result-info {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #64748b;
}

/* 加载状态 */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #64748b;
}

.loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .conversation-container {
        margin: 10px;
        border-radius: 16px;
    }
    
    .reply-type-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .reply-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .conversation-input-area {
        padding: 20px;
    }
    
    .context-textarea {
        min-height: 80px;
    }
}

@media (max-width: 480px) {
    .reply-type-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .result-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.premium-section-header {
    margin-bottom: 32px;
}

.premium-section-header h3 {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px 0;
}

.premium-template-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.premium-category-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(248, 250, 252, 0.8);
    border: 2px solid rgba(226, 232, 240, 0.6);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

.premium-category-btn:hover {
    background: rgba(59, 130, 246, 0.05);
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

.premium-category-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: white;
    transform: translateY(-2px);
    box-shadow: 
        0 12px 24px rgba(59, 130, 246, 0.4),
        0 6px 12px rgba(59, 130, 246, 0.2);
}

.premium-category-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    flex-shrink: 0;
}

.premium-category-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.premium-category-title {
    font-size: 16px;
    font-weight: 600;
}

.premium-category-desc {
    font-size: 13px;
    opacity: 0.8;
}

.premium-templates-grid {
    display: grid;
    gap: 20px;
}

.premium-template-card {
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.premium-template-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

.premium-template-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.premium-template-content {
    color: #475569;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 16px;
}

.premium-template-actions {
    display: flex;
    gap: 12px;
}

/* 按钮样式 */
.premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.premium-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.premium-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.premium-btn-secondary {
    background: rgba(248, 250, 252, 0.8);
    color: #475569;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.premium-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.premium-btn-large {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: 16px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .premium-conversation-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .premium-template-categories {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .premium-input-section,
    .premium-output-section,
    .premium-templates-section {
        padding: 24px;
        border-radius: 20px;
    }
    
    .premium-keywords-grid {
        gap: 8px;
    }
    
    .premium-keyword-tag {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .premium-template-categories {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .premium-category-btn {
        padding: 16px;
    }
    
    .premium-output-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .premium-btn {
        width: 100%;
        justify-content: center;
    }
}
</style>

<script>
// 话术模板数据
const conversationTemplates = {
    opening: [
        {
            title: "专业开场模板 1",
            content: "您好！我是XX公司的专业顾问，今天联系您是因为我们发现很多像您这样的成功企业家，都在面临一个共同的挑战：如何在激烈的市场竞争中持续获得优质客户。我们已经帮助1000+企业解决了这个问题，想了解一下您目前的情况..."
        },
        {
            title: "专业开场模板 2", 
            content: "您好！冒昧打扰了。我是来自XX的营销顾问，专门帮助企业优化获客流程。通过我们的方案，客户平均获客成本降低了40%，转化率提升了60%。想请教一下，您目前主要通过什么渠道获取客户？"
        }
    ],
    discovery: [
        {
            title: "需求挖掘模板 1",
            content: "我理解您的情况。请问您现在主要通过什么方式获取客户？每个月的获客成本大概是多少？这个成本您觉得合理吗？"
        },
        {
            title: "需求挖掘模板 2", 
            content: "您提到的这个问题确实很普遍。能详细说说您目前在营销推广方面最大的困扰是什么吗？是获客成本太高，还是转化率不够理想？"
        }
    ],
    follow_up: [
        {
            title: "跟进模板 1",
            content: "感谢您今天抽时间了解我们的方案。我整理了一份详细的解决方案发给您，包含了我们为类似企业制定的成功案例和具体执行步骤。您方便的时候可以看看，有任何问题随时联系我。"
        },
        {
            title: "跟进模板 2",
            content: "基于我们刚才的沟通，我为您量身定制了一套营销方案。这个方案已经在同行业取得了很好的效果，我相信对您的企业也会有很大帮助。我们什么时候可以详细讨论一下？"
        }
    ],
    objection: [
        {
            title: "异议处理模板 1", 
            content: "我理解您的顾虑，很多客户开始也有同样的想法，但是当他们看到实际效果后，都觉得这是一个非常明智的投资。比如我们的客户张总，一开始也有类似担心，但现在他的业绩提升了150%。"
        },
        {
            title: "异议处理模板 2",
            content: "这个投资确实需要考虑，不过从长远来看是非常划算的。我们可以先从小规模开始，让您看到效果再逐步扩大。很多客户都是这样开始的，现在都成为了我们的长期合作伙伴。"
        }
    ]
};

// 当前选中的关键词
let selectedWords = [];
let generationStartTime = 0;

// 切换词汇选择
function toggleWordSelection(element, word) {
    element.classList.toggle('selected');
    
    if (element.classList.contains('selected')) {
        selectedWords.push(word);
    } else {
        const index = selectedWords.indexOf(word);
        if (index > -1) {
            selectedWords.splice(index, 1);
        }
    }
}

// 清空输入
function clearInput() {
    document.getElementById('conversation-input').value = '';
    selectedWords = [];
    document.querySelectorAll('.premium-keyword-tag.selected').forEach(el => {
        el.classList.remove('selected');
    });
    
    // 隐藏输出区域
    document.getElementById('conversation-output').style.display = 'none';
    showToast('输入已清空');
}

// 从剪贴板粘贴
async function pasteFromClipboard() {
    try {
        const text = await navigator.clipboard.readText();
        document.getElementById('conversation-input').value = text;
        showToast('粘贴成功');
    } catch (err) {
        showToast('粘贴失败，请手动粘贴', 'error');
    }
}

<script>
// 全局变量
let selectedReplyType = '';
let isGenerating = false;
let startTime = 0;

// 关闭对话框
function closeDialog() {
    console.log('关闭对话框');
}

// 粘贴内容
async function pasteContent() {
    try {
        const text = await navigator.clipboard.readText();
        document.getElementById('context-input').value = text;
        showToast('粘贴成功');
    } catch (err) {
        console.error('粘贴失败:', err);
        showToast('粘贴失败，请手动粘贴', 'error');
    }
}

// 选择回复类型
function selectReplyType(element, type) {
    // 移除所有按钮的选中状态
    document.querySelectorAll('.reply-btn').forEach(btn => {
        btn.classList.remove('selected');
    });
    
    // 添加当前按钮的选中状态
    element.classList.add('selected');
    selectedReplyType = type;
    
    console.log('选择的回复类型:', type);
}

// 清空内容
function clearContent() {
    document.getElementById('context-input').value = '';
    document.querySelectorAll('.reply-btn').forEach(btn => {
        btn.classList.remove('selected');
    });
    selectedReplyType = '';
    
    // 隐藏结果区域
    const resultDiv = document.getElementById('reply-result');
    if (resultDiv) {
        resultDiv.style.display = 'none';
    }
    
    showToast('内容已清空');
}

// 生成回复
async function generateReply() {
    const contextInput = document.getElementById('context-input').value.trim();
    
    if (!contextInput) {
        showToast('请先输入对方的话', 'error');
        return;
    }
    
    if (!selectedReplyType) {
        showToast('请选择回复类型', 'error');
        return;
    }
    
    if (isGenerating) {
        return;
    }
    
    isGenerating = true;
    startTime = Date.now();
    
    // 更新按钮状态
    const sendBtn = document.getElementById('send-btn');
    sendBtn.textContent = '生成中...';
    sendBtn.disabled = true;
    
    try {
        // 显示结果区域
        const resultDiv = document.getElementById('reply-result');
        const contentDiv = document.getElementById('reply-content');
        
        resultDiv.style.display = 'block';
        contentDiv.innerHTML = '<div class="loading">正在生成回复...</div>';
        
        // 模拟 API 调用
        const reply = await mockApiCall(contextInput, selectedReplyType);
        
        // 显示生成的回复
        displayReply(reply);
        
    } catch (error) {
        console.error('生成失败:', error);
        showToast('生成失败，请重试', 'error');
    } finally {
        // 恢复按钮状态
        sendBtn.textContent = '发送';
        sendBtn.disabled = false;
        isGenerating = false;
    }
}

// 模拟 API 调用
function mockApiCall(context, replyType) {
    return new Promise((resolve) => {
        // 模拟网络延时
        setTimeout(() => {
            const replies = generateReplyByType(context, replyType);
            const randomIndex = Math.floor(Math.random() * replies.length);
            resolve(replies[randomIndex]);
        }, 1500 + Math.random() * 1000); // 1.5-2.5秒随机延时
    });
}

// 根据类型生成回复
function generateReplyByType(context, type) {
    const replyTemplates = {
        '议价': [
            '您提到的价格问题我非常理解。我们的定价是经过市场调研和成本计算的，相比于同类产品性价比非常高。不过针对您的具体情况，我们可以讨论一下灵活的合作方式。',
            '我理解您对价格的关注。我们的价格反映的是产品的真实价值和服务质量。让我为您详细分析一下成本构成和我们能为您带来的回报。'
        ],
        '信任': [
            '非常感谢您的信任！我们已经服务了超过500家企业，并且有着丰富的成功案例。我们的专业团队将为您提供全程的专业指导和支持。',
            '作为行业内的领先者，我们深知责任重大。我们拥有完善的质量保障体系和售后服务，一定不会辜负您的信任。'
        ],
        '需求': [
            '您提到的需求非常具体，这正好是我们的专业领域。我们可以为您量身定制一个完整的解决方案，让我先了解一下您的具体情况。',
            '针对您的需求，我们有非常成熟的解决方案。让我给您分析一下可能的实施路径和预期效果。'
        ],
        '异议': [
            '我理解您的顾虑，这些问题很多客户都会提到。让我从不同的角度来分析一下，并分享一些成功客户的经验。',
            '您的担心很有道理，这说明您对这个项目很重视。实际上，我们已经帮助很多有类似顾虑的客户解决了问题。'
        ],
        '价值': [
            '我完全同意您对价值的看法。我们的产品/服务不仅仅是一个工具，更是一个能够为您带来长期回报的投资。',
            '您看到了核心问题。我们的价值不在于价格，而在于能够为您带来的效益提升和成本节约。'
        ],
        '签单': [
            '非常高兴您决定与我们合作！我们一定不会辜负您的信任。让我为您安排后续的具体流程和时间表。',
            '太好了！我立即给您准备合同和相关文件。同时，我们的项目经理也会与您联系，确保项目的顺利实施。'
        ],
        '拒绝': [
            '我理解您的决定，尊重您的选择。如果未来您有任何需要，随时可以联系我。我们会一直在这里。',
            '非常感谢您的坦诚反馈。虽然现在可能不是合适的时机，但我相信未来一定会有合作的机会。'
        ],
        '追单': [
            '谢谢您的考虑。我建议我们先做一个小范围的试点，让您先体验一下效果，这样更有利于您做决定。',
            '我理解您需要时间思考。不过我建议我们保持沟通，我可以随时为您解答疑问和提供支持。'
        ],
        '销冠': [
            '非常感谢您的认可！我们的目标就是帮助客户获得最大的成功。我们有丰富的经验和成功案例，能够帮助您实现目标。',
            '我们的确在这个领域做得不错。我们的成功来自于对客户需求的深度理解和持续的创新。'
        ]
    };
    
    return replyTemplates[type] || ['谢谢您的反馈，我会认真考虑您的意见。让我们继续深入沟通，找到最适合的解决方案。'];
}

// 显示回复
function displayReply(reply) {
    const contentDiv = document.getElementById('reply-content');
    const wordCountSpan = document.getElementById('result-word-count');
    const timeSpan = document.getElementById('result-time');
    
    contentDiv.textContent = reply;
    
    // 更新统计信息
    const wordCount = reply.length;
    const timeTaken = ((Date.now() - startTime) / 1000).toFixed(1);
    
    wordCountSpan.textContent = wordCount;
    timeSpan.textContent = timeTaken + 's';
    
    // 滚动到结果区域
    document.getElementById('reply-result').scrollIntoView({ behavior: 'smooth' });
}

// 重新生成回复
function regenerateReply() {
    generateReply();
}

// 复制回复
function copyReply() {
    const content = document.getElementById('reply-content').textContent;
    const copyBtn = document.getElementById('copy-btn');
    const copyText = copyBtn.querySelector('.copy-text');
    const copyIcon = copyBtn.querySelector('.copy-icon');
    
    navigator.clipboard.writeText(content).then(() => {
        // 更新按钮状态
        copyBtn.classList.add('copied');
        copyText.textContent = '已复制';
        copyIcon.textContent = '✓';
        
        showToast('回复已复制到剪贴板');
        
        // 3秒后恢复按钮状态
        setTimeout(() => {
            copyBtn.classList.remove('copied');
            copyText.textContent = '复制';
            copyIcon.textContent = '📋';
        }, 3000);
    }).catch(() => {
        showToast('复制失败', 'error');
    });
}

// Toast通知函数
function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.textContent = message;
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${type === 'error' ? '#ef4444' : '#10b981'};
        color: white;
        padding: 12px 20px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 500;
        z-index: 10000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    `;
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.transform = 'translateX(0)';
    }, 100);
    
    setTimeout(() => {
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => {
            if (document.body.contains(toast)) {
                document.body.removeChild(toast);
            }
        }, 300);
    }, 3000);
}

// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
    // 添加快捷键支持
    document.addEventListener('keydown', function(e) {
        // Enter 快速发送
        if (e.key === 'Enter' && !e.shiftKey && document.activeElement.id !== 'context-input') {
            e.preventDefault();
            generateReply();
        }
        
        // Ctrl+V 快速粘贴
        if ((e.ctrlKey || e.metaKey) && e.key === 'v' && document.activeElement.id !== 'context-input') {
            e.preventDefault();
            pasteContent();
        }
    });
    
    showToast('语境对话系统已就绪！');
});